<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <h:outputStylesheet name="css/bootstrap.css" />
    <h:outputStylesheet name="css/estilos.css" />
    <h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>  
    <h:outputScript target="head">  $ = jQuery;</h:outputScript>    
    
    <script type="text/javascript">
        function ocultarMensaje(){            
            $(".alert-danger").fadeOut();         
        }
        
        window.onload = function() {
            document.getElementById('loginForm:usuario').focus();
        }        
    </script>
    
    <h:head>
        <title><h:outputText value="Gr&#225;fica Luna" /></title>
    </h:head>
    <h:body class="fondo">
        <h:form id="loginForm">
            <div class="container">  
            <div class="row">
              <div class="col-xs-6 col-sm-4"></div>
                
              <div class="col-xs-6 col-sm-4">
                  <div style="padding-top: 30%;">
                      <h:graphicImage  library="pics" name="logotipo2.png" width="120px;"/>
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><h:outputText value="Inicio de Sesi&#243;n"/></h3>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">                                        
                                        <label for="usuario">Usuario:</label>
                                        <h:inputText class="form-control" id="usuario" value="#{login.usuario}" onkeypress="ocultarMensaje();" 
                                                 autocomplete="false" /> 
                                       
                                </div>
                                <div class="form-group">                                   
                                    <label for="password">Password:</label>              
                                    <h:inputSecret class="form-control" id="password" value="#{login.password}" onkeypress="ocultarMensaje();" 
                                                   autocomplete="false" />                                    
                                </div>
                                <div style="text-align: center;">
                                    <h:commandButton class="btn btn-default" value="Ingresar" action="#{login.iniciarSesion}"/>  
                                </div>
                            </div>
                        </div>
                    </div>
                  
                    <h:panelGroup rendered="#{!login.credencialesValidas}" id="panelMensaje" >
                        <div style="text-align: center;">
                            <span class="alert alert-danger">
                                <h:outputText value="#{login.mensajeError}" />
                            </span>
                        </div>
                    </h:panelGroup> 
                </div>
     
                <div class="col-xs-6 col-sm-4"></div>
            </div>
                
                </div>  
            
	</h:form>
        <div class="footer">Copyright &#64; 2014 Gr&#225;fica Luna. Todos los derechos reservados</div>
        
    </h:body>
    <script type="text/javascript">   
        
    </script>
</html>